<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Groove Basin</title>
  <link rel="stylesheet" href="app.css">
  <link rel="shortcut icon" href="/favicon.png">
</head>
<body>
  <div id="nowplaying" class="widget" style="display: none">
    <div class="playback-btns">
      <button class="button" id="nowplaying-prev" tabindex="-1"><label class="icon icon-seek-prev" for="nowplaying-prev"></label></button>
      <button class="button" id="nowplaying-toggle" tabindex="-1"><label id="nowplaying-toggle-icon" class="icon icon-pause" for="nowplaying-toggle-icon"></label></button>
      <button class="button" id="nowplaying-stop" tabindex="-1"><label class="icon icon-stop" for="nowplaying-stop"></label></button>
      <button class="button" id="nowplaying-next" tabindex="-1"><label class="icon icon-seek-next" for="nowplaying-next"></label></button>
      <button class="button" id="stream-btn" tabindex="-1"><span class="icon icon-signal-diag"></span> <label id="stream-btn-label" for="stream-btn">Stream</label></button>
    </div>
    <div id="client-vol" style="display: none">
      <span class="icon icon-volume-off"></span>
      <input type="range" id="client-vol-slider" min="0.0" max="1.0" step="0.001" tabindex="-1">
      <span class="icon icon-volume-on"></span>
    </div>
    <h1 id="track-display"></h1>
    <input type="range" id="track-slider" min="0.0" max="1.0" step="0.001" tabindex="-1">
    <span id="nowplaying-time-elapsed"></span>
    <span id="nowplaying-time-left"></span>
    <div style="clear: both;"></div>
  </div>
  <div id="left-window" style="display: none">
    <div id="tabs">
      <ul>
        <li id="library-tab" class="active">Library</li>
        <li id="playlists-tab">Playlists</li>
        <li id="upload-tab">Import</li>
        <li id="events-tab">Chat</li>
        <li id="settings-tab">Settings</li>
      </ul>
    </div>
    <div id="library-pane" class="widget">
      <div id="lib-window-header" class="window-header">
        <input type="text" id="lib-filter" placeholder="filter">
        <select id="organize">
          <option selected="selected">Artist / Album / Song</option>
        </select>
      </div>
      <div id="library">
        <ul id="library-artists">
        </ul>
        <p id="library-no-items">
          <span class="icon icon-info"></span>
          <strong id="empty-library-message">loading...</strong>
        </p>
      </div>
    </div>
    <div id="playlists-pane" class="widget" style="display: none">
      <input type="text" id="new-playlist-name" placeholder="New Playlist">
      <div id="playlists">
        <ul id="playlists-list">
        </ul>
      </div>
    </div>
    <div id="upload-pane" class="widget" style="display: none">
      <div id="upload">
        <h1>Import by URL</h1>
        <input id="upload-by-url" type="text" placeholder="Paste URL and press enter. Supports YouTube">
        <h1>Upload Files</h1>
        <div id="upload-widget">
          <input type="file" id="upload-input" multiple="multiple" placeholder="Drag and drop or click to browse">
        </div>
        <h1>Import by Name</h1>
        <textarea id="import-by-name" placeholder="Put a list of artist - title track names here, newline delimited. Enter when done. Shift+Enter for newline."></textarea>
        <h1>Options</h1>
        <div>
          Automatically queue imported songs: <input class="button" type="button" id="auto-queue-uploads" value="On">
        </div>
        <div id="import-progress" style="display: none">
          <h1>Ongoing Imports</h1>
          <div>
            <ul id="import-progress-list">
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="events-pane" class="widget" style="display: none">
        <div id="events-online-users">
        </div>
        <div id="events-list">
        </div>
        <div id="chat-box">
          <input type="text" id="chat-box-input" placeholder="chat">
        </div>
    </div>
    <div id="settings-pane" class="widget" style="display: none">
      <div id="settings">
        <div class="section">
          <h1>Authentication</h1>
          <div id="ensure-admin" style="display: none;">
            <p>
            There is currently no admin account. Press this button to create the
            admin account and print the username and password to the server log:
            </p>
            <input class="button" type="button" id="ensure-admin-btn" value="Make Admin Account">
          </div>
          <div id="settings-register" style="display: none">
            <input type="text" id="auth-username" placeholder="username" maxlength="64"><br>
            <input type="password" id="auth-password" placeholder="password">
            <input class="button" type="button" id="auth-show-password" value="Reveal"><br>
            <input class="button" type="button" id="settings-auth-save" value="Save">
            <input class="button" type="button"  id="settings-auth-cancel" value="Cancel">
          </div>
          <div id="settings-show-auth">
            <p>Authenticated as <span id="auth-username-display">...</span></p>
            <p>Permissions:
              <span class="perm" id="auth-perm-read" title="Read access to everything">read</span>
              <span class="perm" id="auth-perm-add" title="Import new songs">add</span>
              <span class="perm" id="auth-perm-control" title="Control playback and the queue">control</span>
              <span class="perm" id="auth-perm-playlist" title="Create, update, delete playlists">playlist</span>
              <span class="perm" id="auth-perm-admin" title="Delete songs, update tags, organize library">admin</span>
            </p>
            <input class="button" type="button" id="settings-auth-edit" value="Edit">
            <input class="button" type="button" id="settings-auth-logout" value="Logout">
            <input class="button" type="button" id="settings-auth-request" value="Request Validation">
          </div>
          <div id="settings-users">
            <h1>Users</h1>
            <select id="settings-users-select"></select><br>
            <input class="button" type="button" id="settings-delete-user" value="Delete">
            <input class="button" type="button" id="user-perm-read" value="read" title="Read access to everything">
            <input class="button" type="button" id="user-perm-add" value="add" title="Import new songs">
            <input class="button" type="button" id="user-perm-control" value="control" title="Control playback and the queue">
            <input class="button" type="button" id="user-perm-playlist" value="playlist" title="Create, update, delete playlists">
            <input class="button" type="button" id="user-perm-admin" value="admin" title="Delete songs, update tags, organize library">
          </div>
          <div id="settings-requests">
            <h1>Requests</h1>
            <div id="settings-request">
              <input type="text" id="request-name"> Name<br>
              <select id="request-replace"></select> Account<br>
              <input class="button" type="button" id="request-approve" value="Approve">
              <input class="button" type="button" id="request-deny" value="Deny">
            </div>
          </div>
        </div>
        <div class="section">
          <h1>Last.fm</h1>
          <div id="settings-lastfm-in">
            <p>
              Authenticated as
              <a id="settings-lastfm-user" href="#">...</a>.
              <input class="button" type="button" id="lastfm-sign-out" value="Sign out">
            </p>
            <p>
              Scrobbling is
              <input class="button" type="button" id="toggle-scrobble" value="Off">
            </p>
          </div>
          <div id="settings-lastfm-out">
            <p>
              <a id="lastfm-auth-url" href="#">Authenticate with Last.fm</a>
            </p>
          </div>
        </div>
        <div class="section">
          <h1>Sound</h1>
          <div>
            Hardware audio playback is
            <input class="button" type="button" id="toggle-hardware-playback" value="On">
          </div>
          <div>Volume: <span id="vol-num"></span>%</div>
          <div id="vol-warning" style="display: none">
            Greater than 100% volume compromises audio quality.
            <a target="_blank" href="https://www.youtube.com/watch?v=iuEtQqC-Sqo">Loudness Zen</a>
          </div>
          <div id="vol">
            <span class="icon icon-volume-off"></span>
            <input type="range" id="vol-slider" min="0.0" max="2.0" step="0.001">
            <span class="icon icon-volume-on"></span>
          </div>
          <div style="clear: both;"></div>
        </div>
        <div class="section">
          <h1>About</h1>
          <ul>
            <li><a id="keyboard-shortcuts-link" href="#">Keyboard Shortcuts</a></li>
            <li><a id="settings-stream-url" href="#" target="_blank">Stream URL</a></li>
            <li><a href="http://github.com/andrewrk/groovebasin" target="_blank">GrooveBasin on GitHub</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="queue-window" class="widget" style="display: none">
    <div class="window-header">
      <input class="button" type="button" id="auto-dj" value="Auto DJ" tabindex="-1">
      <input class="button" type="button" id="queue-btn-repeat" value="Repeat: Off" tabindex="-1">
      <span id="queue-duration-label"></span> <span id="queue-duration"></span>
    </div>
    <div id="queue-list">
      <div id="queue-header" class="header">
        <span class="track">&nbsp;</span>
        <span class="time">Time</span>
        <span class="middle">
          <span class="title">Title</span>
          <span class="artist">Artist</span>
          <span class="album">Album</span>
        </span>
      </div>
      <div id="queue-items">
      </div>
    </div>
  </div>
  <div style="clear: both"></div>
  <div id="main-err-msg">
    <span class="icon icon-alert"></span>
    <div id="main-err-msg-text">Loading...</div>
  </div>
  <div id="blackout" style="display: none"></div>
  <div id="modal" class="widget" style="display: none" tabindex="-1">
    <div id="modal-header">
      <span id="modal-title">Keyboard Shortcuts</span>
      <button id="modal-close" class="button"><label class="icon icon-closethick"></label></button>
    </div>
    <div id="modal-content"></div>
  </div>
  <div id="shortcuts" style="display: none" tabindex="-1">
    <h1>Playback</h1>
    <dl>
      <dt>Space</dt>
      <dd>Toggle playback</dd>
    </dl>
    <dl>
      <dt>Left <em>and</em> Right</dt>
      <dd>Skip 10 seconds in the song</dd>
    </dl>
    <dl>
      <dt>Shift</dt>
      <dd>Hold to skip by 10% instead of 10 seconds</dd>
    </dl>
    <dl>
      <dt>&lt; <em>or</em> Ctrl + Left <em>and</em> &gt; <em>or</em> Ctrl + Right</dt>
      <dd>Skip track</dd>
    </dl>
    <dl>
      <dt>- <em>and</em> +</dt>
      <dd>Change volume</dd>
    </dl>
    <dl>
      <dt>s</dt>
      <dd>Toggle streaming</dd>
    </dl>

    <h1>The Play Queue</h1>
    <dl>
      <dt>Up <em>and</em> Down</dt>
      <dd>Select the next song</dd>
    </dl>
    <dl>
      <dt>Alt + Up <em>and</em> Alt + Down</dt>
      <dd>Move selected tracks up or down one</dd>
    </dl>
    <dl>
      <dt>Enter</dt>
      <dd>Play the selected song</dd>
    </dl>
    <dl>
      <dt>Ctrl+A</dt>
      <dd>Select all</dd>
    </dl>
    <dl>
      <dt>H</dt>
      <dd>Shuffle selection</dd>
    </dl>
    <dl>
      <dt>d</dt>
      <dd>Toggle Auto DJ</dd>
    </dl>
    <dl>
      <dt>r</dt>
      <dd>Change repeat state</dd>
    </dl>
    <dl>
      <dt>Del</dt>
      <dd>Remove selected songs from queue</dd>
    </dl>
    <dl>
      <dt>Shift + Del</dt>
      <dd>Delete selected songs from library</dd>
    </dl>

    <h1>Navigation</h1>
    <dl>
      <dt>/</dt>
      <dd>Switch to Library tab and focus the Search box</dd>
    </dl>
    <dl>
      <dt>p</dt>
      <dd>Switch to Playlists tab and focus the New Playlist box</dd>
    </dl>
    <dl>
      <dt>i</dt>
      <dd>Switch to Import tab and focus the Import by URL box</dd>
    </dl>
    <dl>
      <dt>t</dt>
      <dd>Switch to Chat tab and focus the Chat box</dd>
    </dl>
    <dl>
      <dt>e</dt>
      <dd>Switch to Settings tab</dd>
    </dl>

    <h1>Library Search Box</h1>
    <dl>
      <dt>/</dt>
      <dd>Focus library search</dd>
    </dl>
    <dl>
      <dt>Esc</dt>
      <dd>Clear filter. If filter is already clear, remove focus.</dd>
    </dl>
    <dl>
      <dt>Enter</dt>
      <dd>Queue all search results</dd>
    </dl>
    <dl>
      <dt>Down</dt>
      <dd>Select the first search result</dd>
    </dl>

    <h1>Library</h1>
    <dl>
      <dt>Up <em>and</em> Down</dt>
      <dd>Select the next item up or down</dd>
    </dl>
    <dl>
      <dt>Left <em>and</em> Right</dt>
      <dd>Expand or collapse selected item</dd>
    </dl>
    <dl>
      <dt>Enter</dt>
      <dd>Queue selected items</dd>
    </dl>
    <dl>
      <dt>Del</dt>
      <dd>Delete selected songs from library</dd>
    </dl>
    <dl>
      <dt>E</dt>
      <dd>Edit tags for the selected songs</dd>
    </dl>
    <dl>
      <dt>a</dt>
      <dd>Add selected songs to a playlist</dd>
    </dl>
    <dl>
      <dt>l</dt>
      <dd>Add/remove labels for the selected songs</dd>
    </dl>

    <h1>Playlists</h1>
    <dl>
      <dt>Up <em>and</em> Down</dt>
      <dd>Select the next item up or down</dd>
    </dl>
    <dl>
      <dt>Alt + Up <em>and</em> Alt + Down</dt>
      <dd>Move selected tracks up or down one</dd>
    </dl>
    <dl>
      <dt>Left <em>and</em> Right</dt>
      <dd>Expand or collapse selected playlist</dd>
    </dl>
    <dl>
      <dt>Enter</dt>
      <dd>Queue selected items</dd>
    </dl>
    <dl>
      <dt>Del</dt>
      <dd>Remove selected songs from playlist</dd>
    </dl>
    <dl>
      <dt>Shift + Del</dt>
      <dd>Delete selected songs and playlists from library</dd>
    </dl>
    <dl>
      <dt>R</dt>
      <dd>Rename selected playlist</dd>
    </dl>

    <h1>Miscellaneous</h1>
    <dl>
      <dt>?</dt>
      <dd>Displays keyboard shortcuts</dd>
    </dl>
    <dl>
      <dt>Esc</dt>
      <dd>Close menu, cancel drag, clear selection</dd>
    </dl>
    <dl>
      <dt>Alt</dt>
      <dd>Hold when right clicking to get the normal browser menu</dd>
    </dl>
    <dl>
      <dt>Shift</dt>
      <dd>Hold while queuing to queue next</dd>
    </dl>
    <dl>
      <dt>Alt</dt>
      <dd>Hold while queuing to queue in random order</dd>
    </dl>
    <dl>
      <dt>Ctrl</dt>
      <dd>Hold to select multiple items</dd>
    </dl>
    <dl>
      <dt>Shift</dt>
      <dd>Hold while selecting to select all items in between</dd>
    </dl>
  </div>
  <div id="edit-tags" style="display: none">
    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-name">
        <label accesskey="i" for="edit-tag-name">T<span class="accesskey">i</span>tle:</label>
      </span>
      <input type="text" id="edit-tag-name">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-track">
        <label accesskey="k" for="edit-tag-track">Trac<span class="accesskey">k</span> Number:</label>
      </span>
      <input type="text" id="edit-tag-track">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-file">
        <label accesskey="f" for="edit-tag-file"><span class="accesskey">F</span>ilename:</label>
      </span>
      <input type="text" id="edit-tag-file">
    </div>

    <hr>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-artistName">
        <label accesskey="a" for="edit-tag-artistName"><span class="accesskey">A</span>rtist:</label>
      </span>
      <input type="text" id="edit-tag-artistName">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-composerName">
        <label accesskey="c" for="edit-tag-composerName"><span class="accesskey">C</span>omposer:</label>
      </span>
      <input type="text" id="edit-tag-composerName">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-performerName">
        <label for="edit-tag-performerName">Performer:</label>
      </span>
      <input type="text" id="edit-tag-performerName">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-genre">
        <label accesskey="g" for="edit-tag-genre"><span class="accesskey">G</span>enre:</label>
      </span>
      <input type="text" id="edit-tag-genre">
    </div>

    <hr>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-albumName">
        <label accesskey="b" for="edit-tag-albumName">Al<span class="accesskey">b</span>um:</label>
      </span>
      <input type="text" id="edit-tag-albumName">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-albumArtistName">
        <label accesskey="t" for="edit-tag-albumArtistName">Album Ar<span class="accesskey">t</span>ist:</label>
      </span>
      <input type="text" id="edit-tag-albumArtistName">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-trackCount">
        <label for="edit-tag-trackCount">Track Count:</label>
      </span>
      <input type="text" id="edit-tag-trackCount">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-year">
        <label accesskey="y" for="edit-tag-year"><span class="accesskey">Y</span>ear:</label>
      </span>
      <input type="text" id="edit-tag-year">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-disc">
        <label accesskey="d" for="edit-tag-disc"><span class="accesskey">D</span>isc Number:</label>
      </span>
      <input type="text" id="edit-tag-disc">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-discCount">
        <label for="edit-tag-discCount">Disc Count:</label>
      </span>
      <input type="text" id="edit-tag-discCount">
    </div>

    <div>
      <span class="field">
        <input type="checkbox" id="edit-tag-multi-compilation">
        <label accesskey="m" for="edit-tag-compilation">Co<span class="accesskey">m</span>pilation:</label>
      </span>
      <input type="checkbox" id="edit-tag-compilation">
    </div>

    <hr>

    <div style="float: right">
      <button class="button" id="edit-tags-ok" accesskey="v">Sa<span class="accesskey">v</span>e &amp; Close</button>
      <button class="button" id="edit-tags-cancel">Cancel</button>
    </div>
    <button class="button" id="edit-tags-prev" type="button" accesskey="p"><span class="accesskey">P</span>revious</button>
    <button class="button" id="edit-tags-next" type="button" accesskey="n"><span class="accesskey">N</span>ext</button>
    <button class="button" id="edit-tags-per"><label id="edit-tags-per-label" accesskey="r" for="edit-tags-per">Pe<span class="accesskey">r</span> Track</label></button>
  </div>
  <ul id="context-menu" class="widget" style="display: none">
    <li id="menu-queue"><a href="#">Queue</a></li>
    <li id="menu-queue-next"><a href="#">Queue Next</a></li>
    <li id="menu-queue-random"><a href="#">Queue in Random Order</a></li>
    <li id="menu-queue-next-random"><a href="#">Queue Next in Random Order</a></li>
    <li id="menu-remove"><a href="#">Remove from Playlist</a></li>
    <li id="menu-add-to-playlist"><a href="#">Add to Playlist...</a></li>
    <li id="menu-add-remove-label"><a href="#">Add/Remove Labels...</a></li>
    <li id="menu-shuffle"><a href="#">Shuffle</a></li>
    <li id="menu-delete"><a href="#">Delete from Library</a></li>
    <li id="menu-delete-playlist"><a href="#">Delete Playlist</a></li>
    <li id="menu-rename-playlist"><a href="#">Rename Playlist</a></li>
    <li id="menu-download"><a href="#" target="_blank">Download</a></li>
    <li id="menu-edit-tags"><a href="#">Edit Tags</a></li>
  </ul>
  <div id="add-to-playlist-dialog" style="display: none">
    <div>
      <input type="text" id="add-to-playlist-filter" placeholder="filter">
    </div>
    <ul id="add-to-playlist-list">
    </ul>
    <div id="add-to-playlist-new"></div>
  </div>
  <div id="add-remove-label-dialog" style="display: none">
    <div>
      <input type="text" id="add-remove-label-filter" placeholder="filter">
    </div>
    <div id="add-remove-label-list">
    </div>
    <div id="add-remove-label-new"></div>
  </div>
  <script src="app.js"></script>
</body>
</html>
